<template>
  <div>
    <!-- 行内表单 -->
    <el-form :inline="true" :model="cForm" class="demo-form-inline">
      <el-form-item label="一级分类" style="margin-right:30px">
        <!-- 当一级分类的select数据发生改变，触发获取二级分类的函数 -->
        <el-select v-model="cForm.category1Id" placeholder="请选择" @change="getCategory2List" :disabled="!isShowTable">
          <!-- label收集的是一级菜单各个数据的名字，value收集的是每个数据的id，以便于后续的增改删差 -->
          <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in formInline.category1List" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类" style="margin-right:30px">
        <el-select v-model="cForm.category2Id" placeholder="请选择" @change="getCategory3List" :disabled="!isShowTable">
          <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in formInline.category2List" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="三级分类">
        <el-select v-model="cForm.category3Id" placeholder="请选择" @change="handlerCategoryId" :disabled="!isShowTable">
          <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in formInline.category3List" :key="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CatogorySelect',
  data () {
    return {
      // 获取到的各级菜单数据列表
      formInline: {
        category1List: [],
        category2List: [],
        category3List: []
      },
      // 要传给父组件的各级数据id
      cForm: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      }
    }
  },
  props: ['isShowTable'],
  methods: {
    // 把新增的属性、属性名提交给后台
    onSubmit () { },
    // 获取一级分类列表
    // async/await处理异步保证获得数据
    async getCategory1List () {
      let result = await this.$api.attrs.reqCatogory1List()
      // console.log(result)
      if (result.code === 200) {
        this.formInline.category1List = result.data
        return result.data
      }
    },
    // 获取二级分类列表
    async getCategory2List () {
      const { category1Id } = this.cForm
      // 把获取到的c1Id传递给attrs父组件,level用于父组件区分是几级id
      this.$emit('getCategoryId', { categoryId: category1Id, level: 1 })
      // 获取新的二级分类列表后，要重置select框的数据
      this.formInline.category2List = []
      this.formInline.category3List = []
      this.cForm.category2Id = ''
      this.cForm.category3Id = ''
      let result = await this.$api.attrs.reqCatogory2List(category1Id)
      // console.log(result)
      if (result.code === 200) {
        this.formInline.category2List = result.data
        return result.data
      }
    },
    // 获取三级分类列表
    async getCategory3List () {
      const { category2Id } = this.cForm
      // 把获取到的c2Id传递给attrs父组件,level用于父组件区分是几级id
      this.$emit('getCategoryId', { categoryId: category2Id, level: 2 })
      // 获取新的三级分类列表后，要重置select框
      this.formInline.category3List = []
      this.cForm.category3Id = ''
      let result = await this.$api.attrs.reqCatogory3List(category2Id)
      // console.log(result)
      if (result.code === 200) {
        this.formInline.category3List = result.data
        return result.data
      }
    },
    // 根据分类列表的选择获取相应的数据
    async handlerCategoryId () {
      const { category3Id } = this.cForm
      // 把获取到的c3Id传递给attrs父组件,level用于父组件区分是几级id
      this.$emit('getCategoryId', { categoryId: category3Id, level: 3 })
    }
  },
  mounted () {
    // 获取一级分类列表
    this.getCategory1List()
  }
}
</script>

<style>
</style>
